<template>
  <view class="checkbox" 
    :style="{
      backgroundColor: isChecked ? props.activeColor : '',
      borderColor:isChecked ? props.activeColor : ''
    }" @click="handleClick">
    <icon-dui1 color="#fff"></icon-dui1>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
const props = defineProps({
 // 形状，square为方形，circle为圆型
 shape: {
    type: String,
    default: 'circle'
  },
  // 整体的大小
  size: {
    type: [String, Number],
    default: '30rpx'
  },
  // 是否默认选中
  checked: {
    type: Boolean,
    default: false
  },
  // 选中状态下的颜色
  activeColor: {
    type: String,
    default: '#FC3247'
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否可以取消
  canCancel:{
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['change'])

let isChecked = ref<boolean>(false)
watch(()=> props.checked,(nv, ov)=>{
  isChecked.value = props.checked
}, {immediate: true})


const handleClick = () => {
  if(props.disabled) return
  if(isChecked.value && !props.canCancel){
    return;
  }
  isChecked.value = !isChecked.value
  console.log(isChecked.value,'====')
  emit('change', isChecked.value)
}
</script>

<style lang="less" scoped>
  .checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36rpx;
    height: 36rpx;
    background-color: #EAEAEA;
    border-radius: 50%;
    border: 1rpx solid #E8E8E8;
  

    .c-icon {
      font-size: 33rpx;
      color: #fff;
      text-align: center;
      border-radius: 50%;
    }
  }
</style>